<template>
  <div class="homepage">
    <Nav></Nav>
    <div class="banner">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item
          v-for="item in info.banner"
          :key="item"
        >
          <img  @click="gotoDetail(item.url)" :src="item.pc_images" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="wrap">
      <div class="tabs">
        <div class="tabs-title">三位一体<span></span>智能推荐</div>
        <div class="tabs-subTitle">
          Gaobangbabg, paint a picture of life and draw a blueprint for the
          future.
        </div>
      </div>
      <div class="bg1">
        <div class="title">{{title}}</div>
        <div class="subtitle">
          {{subtitle}}
        </div>
        <div @click="goToZhiNeng" class="btn">了解详情</div>
      </div>
      <div class="list">
        <div class="list-item" @mouseover="mouseOver(index)" @click="goToTab(item.url)" v-for="(item,index) in tabs" :key="item">
          <div class="img-wrap" :class="{'img-wrap-active' : currentIndex == index}"><img :src="item.img"/></div>
          <div class="title">{{item.title}}</div>
          <div class="line"></div>
          <div class="subtitle">
            Intelligent recommendationThe doctor is looking at Alan's feet. He
            is laughing.
          </div>
        </div>
      </div>
      <div class="tabs">
        <div class="tabs-title">三位一体<span></span>视频简介</div>
        <div class="tabs-subTitle">
         Gaobangbabg, paint a picture of life and draw a blueprint for the future.
        </div>
      </div>
      <div class="what-san-vedio" v-for="item in info.trinity_video" :key="item.video">
        <video
          ref="myVedio"
          id="myVedio"
          :poster="poster"
          :src="item.video"
          controls
          class="what-san-vedio-box"
        ></video>
      </div>
      <div class="tabs">
        <div class="tabs-title">三位一体<span></span>课程内容</div>
        <div class="tabs-subTitle">
         Gaobangbabg, paint a picture of life and draw a blueprint for the future.
        </div>
      </div>
      <div class="introduce-wrap">
        <div
          class="introduce-wrap-item"
          v-for="(item, index) in info.trinity_course"
          @click="gotoSchool(item.id)"
          :key="item.name"
        >
          <introduceProject
            :index="index"
            :introduce="item"
            :readMore="false"
          ></introduceProject>
        </div>
      </div>
      <div class="more-class">
        <div class="title ">海量课程精品推荐，点击了解更多课程</div>
        <div class="subtitle">Massive course quality recommendation, click for more courses.</div>
        <div class="btn"  @click="gotoSchoolList()">查看更多</div>
      </div>
      <div class="tabs">
      <div class="tabs-title">资讯中心</div>
      <div class="tabs-subTitle">
        Information center, trinity information, strong foundation plan information, advance approval information of higher vocational education, and more information should not be missed.
      </div>
      </div>
      <div class="introduce-wrap">
        <div
          class="introduce-wrap-item"
          v-for="(item, index) in info.article"
          :key="item.name"
        >
          <consultationProject
            :changeFlag="true"
            :index="index"
            :introduce="item"
            :readMore="false"
          ></consultationProject>
        </div>
      </div>
    </div>
     <Footer></Footer>

     <div  class="pop" :class="{poptransform:showPop==1,poptransformNone:showPop == 0} ">
      <span @click="close" class="close"></span>
     </div>

     <div v-if="closeWeiXinVal" class="model" @click="closeWeiXin()">
        <img src="../../assets/pc/weixin.jpg"/>
     </div>
  </div>
</template>

<script setup>
import Footer from '../../components/pc/Footer.vue';
import Nav from '../../components/pc/nav.vue';
import introduceProject from '../../components/pc/introduceProject.vue';
import consultationProject from '../../components/pc/consultationProject.vue';
import {getData} from '../../hooks/homepage'
import { onMounted, ref } from 'vue';
import { getHomepageListPC } from '../../api/apiList/pcApi.js';
import homepageTab1 from '../../assets/pc/homepage-tab1.png';
import homepageTab2 from '../../assets/pc/homepage-tab2.png';
import homepageTab3 from '../../assets/pc/homepage-tab3.png';
import homepageTab4 from '../../assets/pc/homepage-tab4.png';
import homepageTab5 from '../../assets/pc/homepage-tab5.png';
import { useRouter } from 'vue-router';
const router = useRouter();
const closeWeiXinVal = ref(true);
let title = ref(-1);
let subtitle = ref(-1);
let currentIndex = ref(-1);
let tabs = ref([])
const url1 = '/enrollmentInfoPc'
const url2 = '/schoolRecommendListPc'
const url3 = '/classIntroducePc'
const url4 = '/entryPc'
const url5 = ''
let showPop = ref(-1)

const info = ref({})
onMounted(async () => {
  let {infoData} =await getData();
  info.value = infoData
  title.value = info.value.type[0].title
  subtitle.value = info.value.type[0].subtitle
  info.value.type.map((item,index)=>{
    if(index != 0){
      tabs.value.push({
        img: index == 1 ? homepageTab1 : index == 2 ? homepageTab2 :  index == 3 ? homepageTab3 :  index == 4 ? homepageTab4 : homepageTab5,
        title: item.title,
        subtitle: item.subtitle,
        url:index == 1 ? url1 : index == 2 ? url2 :  index == 3 ? url3 :  index == 4 ? url4 : url5
        })
    }
  })
  localStorage.setItem("navInfo",JSON.stringify(infoData));
});
const gotoSchoolList = (id) => {
   router.push({ path: '/classListPc' });
};
const mouseOver = (index)=>{
  currentIndex.value = index
};
const close = ()=>{
  showPop.value = 0
}
const closeWeiXin = ()=>{
  closeWeiXinVal.value = false
}
const gotoDetail = (url) => {
  if(url!=null){
     window.location.href=url;
  }
};
const goToZhiNeng = (index) => {
   router.push({ path: '/smartRegistrationPc' });
};
const gotoSchool = (id) => {
   router.push({ path: '/classDeatilPc', query: { id } });
};
const goToTab = (url) => {
  console.log(url)
  
  if(url!=''){
      router.push({ path: url});
    } 
   else {
    showPop.value = 1
  }
};

// enrollmentInfoPc

</script>

<style lang="less" scoped>
.pop {
    position: fixed;
    top:50%;
    z-index: 9999;
    left: 50%;
    transform: translate(-50%,-50%);
    width:900Px;
    height:500Px;
    background-image: url('../../assets/pc/pop.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: -1;
    .close {
      position: absolute;
      right: 30Px;
      top: 0Px;
      width: 100Px;
      height: 80Px;
      cursor: pointer;
    }
}
.poptransformNone {
   animation: myfirst1 0.5s;
}
.poptransform {
   animation: myfirst 0.5s;
   animation-fill-mode: forwards;
}
@keyframes myfirst
{
    from {transform: translate(-50%,-40%); opacity: 0; z-index: -1;}
    to {transform: translate(-50%,-50%); opacity: 1;z-index: 10;}
}
@keyframes myfirst1
{   
    from {transform: translate(-50%,-50%); opacity: 1;z-index: 10;}
    to{transform: translate(-50%,-40%); opacity: 0;z-index: -1;}
}
.homepage {
  .model {
    position:fixed;
    right:0Px;
    bottom: 40Px;
    width: 358Px;
    height: 261Px;
    z-index: 999;
    cursor: pointer;
    img {
      width: 100%;
      height:100%;
    }
  }
  .wrap {
    width: 1201Px;
    margin: 0 auto;
  }
  .van-swipe {
    // height: 100%;
  }
  .my-swipe111 .van-swipe-item {
    color: #fff;
    font-size: 20Px;
    line-height: 150Px;
    text-align: center;
    background-color: #39a9ed;
  }
  .banner {
    position: relative;
    width: 100vw;
    // height: 645Px;
    margin: 0 auto;
    z-index: 1;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tabs {
    margin-top: 40Px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    .tabs-title {
      display: flex;
      align-items: center;
      font-size: 28Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 40Px;
      margin-bottom: 3Px;
      span {
        width: 12Px;
        height: 12Px;
        background: #d8d8d8;
        border-radius: 12Px;
        margin: 0 32Px;
      }
    }
    .tabs-subTitle {
      font-size: 22Px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 30Px;
      margin-bottom: 37Px;
    }
  }
  .bg1 {
    height: 391Px;
    background: #eff4ff;
    cursor: pointer;
    background-image: url('../../assets/pc/homepage-bg1.png');
    background-size: 100%;
    .title {
      font-size: 24Px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      text-align: center;
      color: #000000;
      line-height: 33Px;
      letter-spacing: 1Px;
      padding: 102Px 0 26Px 137Px;
      width: 488Px;
    }
    .subtitle {
      font-size: 18Px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 25Px;
      letter-spacing: 1Px;
      padding: 0 0 40Px 137Px;
      width: 488Px;
      text-align: center;
    }
    .btn {
      width: 116Px;
      height: 40Px;
      margin-left: 297Px;
      background-image: url('../../assets/pc/homepage-btn.png');
      background-size: 100%;
      font-size: 15Px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 21Px;
      line-height: 40Px;
      padding-left: 15Px;
    }
  }
  .list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .list-item {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      .img-wrap-active {
        background: linear-gradient(183deg, #D6E8FF 0%, #FFFFFF 100%);
        box-shadow: 0Px 2Px 4Px 0Px rgba(240,240,240,0.5), 0Px 0Px 4Px 2Px rgba(225,225,225,0.36);
        border-radius: 0Px 0Px 37Px 37Px;
        border-image: linear-gradient(180deg, rgba(221, 236, 255, 1), rgba(255, 255, 255, 1)) 2 2;
      }
      .img-wrap {
        width: 240Px;
        height: 240Px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          width: 155Px;
          height: 155Px;
          border-radius: 32Px;
        }
      }
      .title {
        font-size: 24Px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 33Px;
        letter-spacing: 1Px;
        margin-bottom: 10Px;
      }
      .line {
        width: 96Px;
        height: 6Px;
        background: #ffc518;
        margin-bottom: 10Px;
      }
      .subtitle {
        font-size: 12Px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 17Px;
      }
    }
  }
  .what-san-vedio {
    width: 1199Px;
    height: 504Px;
    background: #000000;
    .what-san-vedio-box {
      width: 1199Px;
      height: 504Px;
    }
  }
  .introduce-wrap {
    margin-top: 15Px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .more-class {
    padding-left: 143Px;
    height: 237Px;
    position: relative;
    margin-top:20Px;
    margin-bottom: 20Px;
    background-image: url('../../assets/pc/homepage-classbg.png');
      background-size: 100%;
    .title {
      font-size: 50Px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #111111;
      line-height: 70Px;
      letter-spacing: 3Px;
      margin-bottom: 24Px;
      padding-top: 49Px;
    }
    .subtitle {
      font-size: 21Px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 29Px;
    }
    .btn {
      position: absolute;
      right: 92Px;
      bottom: 37Px;
      width: 116Px;
      height: 40Px;
      margin-left: 297Px;
      background-image: url('../../assets/pc/homepage-btn.png');
      background-size: 100%;
      font-size: 15Px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 21Px;
      line-height: 40Px;
      padding-left: 15Px;
    }
  }
}
</style>
